Estude & Revise · sistema visual · v2
Design System
Contrato visual do produto. Toda inclusão ou alteração segue estes tokens — em qualquer um dos 3 temas.
01 · Fricção zero
1 ação clara por tela. Decisões secundárias ficam colapsadas.
02 · Dois tons
Grafite + off-white. Sem azul/roxo de template, em nenhum tema.
03 · Cor = dado
Cor só informa: temperatura, disciplina, status. Nunca decoração.
04 · Editorial
Cantos ≤16px, profundidade por contraste, não por sombra.
05 · Dopamina útil
Projete para TDAH: recompensa imediata, progresso sempre visível.
Os 3 temas
mesma hierarquia, mesmos componentes — só a base muda
Padrão · Grafitedefault
fundo #0A0908
superfície #141210 · 2ª #1F1C19
texto #F5F3EF · #A39D94 · #6E6860
ação #ECE8E0 · texto #1A1817
Uso diário. Grafite quente (base marrom, nunca azulada).
Claro · Papel-quenteluz acesa
fundo #EFECE5 · frame #F7F4EE
card #FFFFFF · 2ª #F1EDE5
texto #1A1817 · #6E6860 · #98928A
ação #151312 · texto #F7F5F0
Papel quente, nunca branco puro. Dourados escurecem: #7A5A14 em chip #FFF6E3.
Black · AMOLEDeconomia
fundo #000000 (pixels desligados)
card #0A0A09 · 2ª #111110
texto igual ao grafite
ação #ECE8E0 · texto #1A1817
Preto verdadeiro p/ bateria. Sem glow amplo — luz só em recompensa.
Cor por dado · as lentes
a cor de uma célula depende da lente que o usuário escolheu
Lente 1 · Temperatura de incidência (assinatura)
super-friofriomornoquentesuper-quente
célula: fundo 14% + borda 3px
nunca cor cheia no fundo
Lente 2 · Disciplina (categórica, terrosa)
Constitucional
Civil
Penal
Português
Administrativo
No Roteiro, o seletor de lente troca o que a cor significa: Disciplina · Temperatura · Tipo de conteúdo. Paleta categórica dessaturada/terrosa — nunca compete com a temperatura.
Degradês · só funcionais
Faixa de urgência (hero) — do super-quente ao quente#D8453F→#E27B3A
Barra de progresso/XP — off-white para cinza-quente#ECE8E0→#BBB4A8
Glow radial — só em recompensa (chama, baú, marco)radial 10–22%
PROIBIDO: degradê decorativo de marca (azul→roxo de template)
Status · por tema
Sucesso#3FD89A · claro #22A374
XP · streak · ouro#E0A93C · claro #7A5A14
Erro · urgência#D8453F · claro #C13A35
No claro, todo semântico escurece para manter contraste ≥ 4.5:1. Chips tonais firmes (ex.: #FFF6E3), nunca véu transparente.
Motor de motivação · projete como se todos tivessem TDAH
Próxima ação única
A tela decide por você: 1 CTA dominante, sessões de 8 min ("cabe no seu agora").
Progresso quase-completo
Barras entram já adiantadas (efeito Zeigarnik): nível 88%, baú 2/3, marco 94%.
Recompensa variável
Baú diário, missões, combo — celebração imediata (+XP no ato, micro-animação).
Patrimônio anti-abandono
"47h investidas" nunca zera — voltar protege o que já foi construído (aversão à perda).
Regra de ouro: recompensa nunca compete com a ação — glow e animação só DEPOIS do clique, nunca antes.
Fluxo de decisões · Quadro de Avisos e Ações ("Agir agora")
Ao abrir um novo dia com itens exigindo decisão, uma tela de decisão cobre o setor inteiro — Revisões e Agenda só são reveladas (já recalculadas) após decidir tudo. Nunca uma pilha de avisos: sempre uma decisão por vez.
Máx. 4 telas
Acima disso, agrupa por categoria: decisão em lote (padrão) ou "um a um".
Ordem fixa
1ª Revisões atrasadas · 2ª Pendências de estudo · 3ª Baú · última sempre "Estudo ou Revisões?" (persistida, muda a ordem dos widgets).
Ações com cascata
Encaixar hoje / Reagendar no Roteiro empurram o previsto em cascata; Deixar p/ depois reabre a decisão ao tocar a disciplina no Roteiro (com Excluir recuperável).
Resolvido = some
Sem histórico no Início. Indicador "Decisão N de M" + dots de progresso.
Acessibilidade · texto
No dropdown do perfil, junto do seletor de tema: controle de tamanho do texto, persistido como o tema. Implementação: escala da fonte raiz (rem).
Texto · 100%
A−
A
A+
3 níveis: 90% · 100% · 115%. Calendário: executado = tint verde 5%, pendência = tint âmbar 5% + borda 30% (mapa de constância).
Tipografia
Bricolage Grotesque
Títulos
700–800 · tracking −0.6px
IBM Plex Sans — corpo e interface
Corpo
400–700
IBM Plex Mono · 3 075 XP · 82%
Números / labels
timers, XP, uppercase
Forma
8px · chips
11px · botões
16px · cards
Nunca > 18px. Ícones de traço 1.7 (estilo Lucide), sem preenchimento. Emoji só onde é linguagem (🔥 streak).
Contrato: 3 temas (Grafite · Claro papel-quente · Black AMOLED), cor só como dado, degradê só funcional, 1 ação por tela, recompensa depois do esforço.